<template>
  {{ token }}
  <div>我是App组件</div>
  <hr />
  <Props :title="`${props_title} - 是的`" />
  <hr />
  <Emits :title="emits_title" @change="v => emits_title = v" />
  <hr />
  <Attrs class="attr-class" :title="attrs_title" />
  <hr />
  <Inject />
  <hr />
  <RefC ref="Ref" />
  <button @click="getRef">获取Ref</button>
  <button @click="setTokenxxx">设置token</button>
</template>

<script lang="ts" setup>
import { provide, reactive, ref, shallowRef, toRef, toRefs } from "vue";
import { useStore } from './store/user'
import Props from './components/props.vue'
import Emits from "./components/emits.vue";
import Attrs from "./components/attrs.vue";
import Inject from './components/inject.vue'
import RefC from './components/ref.vue'
import { storeToRefs } from "pinia";

const { setToken } = useStore()
const { token } = storeToRefs(useStore())

const Ref = ref(null)
const props_title = shallowRef('我是props标题')
const emits_title = shallowRef('我是emits标题')
const attrs_title = shallowRef('xxxx')
const obj = reactive({
  title: '我是标题inject'
})

const getRef = () => {
  console.log(Ref.value);
}

const setTokenxxx = () => {
  setToken()
  console.log('改变了没？', token.value);
  
}

provide('title', toRef(obj, 'title'))

</script>

<style>
.attr-class {
  border: 1px solid red;
}
</style>